<!DOCTYPE html>
<html lang="ch">
<head>
  <meta charset="UTF-8">
  <title>AJAx</title>
</head>

<body>
  使用的知乎api，会有跨域问题，解决办法
  https://www.cnblogs.com/laden666666/p/5544572.html
</body>
<script type="text/javascript">
/** ==========AJAX========== **/
// Asynchronous JavaScript and XML 异步的JavaScript和XML
// AJAX不是新的编程语言,而是一种使用现有标准的新方法,AJAX是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
//   AJAX的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化
// 创建XMLHttpRequest对象
  let xmlhttp;
  if (window.XMLHttpRequest) { // 代码适应IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // 代码适应IE6, IE5
  }
// 属性
//   .onreadystatechange  存储函数(或函数名),每当readyState的属性改变时,就会调用该函数 用此属性实现响应
//   xmlhttp.readyState	  存有的XMLHttpRequest的状态从0到4发生变化。
//     0:请求未初始化   此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备,
//        值为0表示对象已经存在,否则浏览器会报错:对象不存在。
//     1:服务器连接已建立   此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)
//        完成对象状态的设置.并调用send()方法开始向服务端发送请求.值为1表示正在向服务端发送请求
//     2:请求已接收     此阶段接收服务器端的响应数据.但获得的还只是服务端响应的原始数据,并不能直接在客户端使用.
//        值为2表示已经接收完全部响应数据，并为下一阶段对数据解析作好准备。
//     3:请求处理中     此阶段解析接收到的服务器端响应数据,即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody,
//        responseText或responseXML的属性存取的格式,为在客户端调用作好准备.状态3表示正在解析数据。
//     4:请求已完成,且响应已就绪  此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。
//        值为4表示数据解析完毕，可以通过的XMLHttpRequest对象的属性取得数据。
//     onreadystatechange事件被触发 5 次（0 - 4），对应着readyState的每个变化。
//         0：请求未初始化，还没有调用 open()。
//         1：请求已经建立，但是还没有发送，还没有调用 send()。
//         2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
//         3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
//         4：响应已完成；您可以获取并使用服务器的响应了。
//   xmlhttp.response     响应主体
//   .responseText	响应主体 以文本形式返回响应 只有readyState==4,responseText才可用,因为这时AJAX请求已结束
//   .responseXML	响应主体 以XML格式返回响应 如果服务器的响应是XML,而且需要作为XML对象进行解析,请使用responseXML
//   .status       将状态返回为数字（例如，“Not Found”为404，“OK”为200）
//   .statusText   以字符串形式返回状态（例如，“Not Found”或“OK”）
// 方法
//   xmlhttp.abort()      取消当前请求。
//   .getAllResponseHeaders()          以字符串形式返回完整的HTTP标头集。
//   .getResponseHeader( headerName )  返回指定HTTP标头的值。
//   .open(请求类型,URL)	          打开指定获取或交的方法和URL的请求。
//   .open(请求类型,URL,async)	  与上面相同，但指定异步或不。 true异步|false同步
//   .open(请求类型,URL,async,userName,password)  与上面相同，但指定用户名和密码。
//   .send(content）	            发送获取请求。
//   .setRequestHeader(label,value)    将标签/值对添加到要发送的HTTP标头。
//  get对比post
//    GET 请求可被缓存
//    GET 请求有长度限制
//    GET 请求只应当用于取回数据
//    GET 请求保留在浏览器历史记录中
//    GET 请求可被收藏为书签
//    GET 请求不应在处理敏感数据时使用,请求只应当用于取回数据,可更新服务器上的文件或数据库
//    GET 编码类型:application/x-www-form-urlencoded
//    POST编码类型:application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码
//    数据类型的限制:GET只允许ASCII字符,POST无限制。也允许二进制数据
  xmlhttp.onreadystatechange = function() { // 当async==false为同步,要把想执行的代码放到send()后面
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200)
    {
      console.log(xmlhttp);
      console.log(xmlhttp.response);
    }
  }
// xmlhttp.open("GET","https://news-at.zhihu.com/api/4/news/latest",true);
  xmlhttp.open("POST","https://www.w3cschool.cn/index/getNotelist",true);
// 如果需要像HTML表单那样POST数据要加这个 然后在send()方法中规定您希望发送的数据
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("xing=jin&name=taiyan");

/**
 * 创建一个ajax工具类.
 */
function aJax(url, fnSuccess, fnFailed){
  var xhr = new XMLHttpRequest();
  xhr.open("get", url, true);
  xhr.send(null);
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
      if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
        fnSuccess(xhr.responseText);
      }else{
        if(fnFailed){
          fnFailed(xhr.status);
        }
      }
    }
  };
}

/** http (Hyper Text Transfer Protocol超文本传输协议) **/
//  用于从万维网服务器传输超文本到本地浏览器的传送协议,
//  基于TCP/IP通信协议来传递数据(HTML文件,图片文件,查询结果等)
//  工作原理
//    HTTP协议工作于客户端-服务端架构为上.浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求
//    Web服务器有：Apache服务器，IIS服务器（Internet Information Services）等。
//    Web服务器根据接收到的请求后，向客户端发送响应信息。
//    HTTP默认端口号为80，但是你也可以改为8080或者其他端口 
//    HTTP为一个通信协议。HTTP 客户端发起请求并创建端口。HTTP 服务器在端口监听客户端的请求。
//      HTTP服务器在收到请求后则返回状态和所请求的内容
//    HTTP三点注意事项：
//      HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，
//        并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
//      HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，
//        任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
//      HTTP是无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。
//        缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大.
//        另一方面，在服务器不需要先前信息时它的应答就较快
//  消息结构
//    HTTP是基于客户端/服务端(C/S)的架构模型,通过一个可靠的链接来交换信息,是一个无状态的请求/响应协议
//    HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接
//    一旦建立连接后,数据消息就通过类似Internet邮件所使用的格式[RFC5322]和多用途Internet邮件扩展(MIME)[RFC2045]来传送
//    客户端请求消息
//      客户端发送一个HTTP请求到服务器的请求消息包括以下格式：
//        请求行（request line）、请求头部（header）、空行和请求数据四个部分组成
//    服务器响应消息
//      HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。
//  常用方法 
//    GET    请求指定的页面信息，并返回实体主体	          
//    POST   向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。
//             数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。	    
//    PUT	   从客户端向服务器传送的数据取代指定的文档的内容	
//    DELETE 请求服务器删除指定的页面	          
//    HEAD   类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头   
//    TRACE  回显服务器收到的请求，主要用于测试或诊断。	
//    OPTIONS	允许客户端查看服务器的性能	  
//    CONNECT	HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
//  请求头信息
//    Accept 客户端支持的数据类型
//    Accept-Charset 客户端采用的编码
//    Accept-Encoding 客户端支持的数据压缩格式
//    Accept-Language 客户端的语言环境
//    Cookie 客服端的cookie
//    Host 请求的服务器地址
//    Connection 客户端与服务连接类型
//    If-Modified-Since 上一次请求资源的缓存时间，与Last-Modified对应
//    If-None-Match 客户段缓存数据的唯一标识，与Etag对应
//    Referer 发起请求的源地址。
//    Pragma 是否缓存
//  响应头信息
//    Allow 服务器支持哪些请求方法（如GET、POST等）。
//    Content-Encoding 文档的编码（Encode）方法 响应数据的压缩格式
//    Content-Length	响应数据长度。只有当浏览器使用持久HTTP连接时才需要这个数据
//    Content-language 语言环境。
//    Content-Type	响应数据的类型
//    Date	消息发送的时间
//    Age 经过的时间
//    Etag 被请求变量的实体值,用于判断请求的资源是否发生变化
//    Expires	应该在什么时候认为文档已经过期，从而不再缓存它
//    Last-Modified	文档的最后改动时间
//    Location	表示客户应当到哪里去提取文档
//    Refresh	表示浏览器应该在多少时间之后刷新文档，以秒计
//    Server	服务器名字 服务器的型号
//    et-Cookie	设置和页面关联的Cookie
//    WWW-Authenticate	客户应该在Authorization头中提供什么类型的授权信息
//    Pragma 是否缓存
//  URL构成 传输协议://www.[主机名.com:端口(域名)]/路径名?查询条件#hash值
//  状态码
//    200	请求成功,一般用于GET和POST方法	      代码描述:OK
//    301	资源移动.所请求资源自动到新的URL,浏览器自动跳转至新的URL	Moved Permanently
//    304	未修改.所请求资源未修改,浏览器读取缓存数据	Not Modified
//    400	请求语法错误,服务器无法解析	Bad Request
//    404	未找到资源,可以设置个性“404页面”	     Not Found
//    500	服务器内部错误	                      Internal Server Error
//    1**	信息,服务器收到请求,需要请求者继续执行操作
//    2**	成功,操作被成功接收并处理
//    3**	重定向,需要进一步的操作以完成请求
//    4**	客户端错误,请求包含语法错误或无法完成请求
//    5**	服务器错误,服务器在处理请求的过程中发生了错误
//  HTTP会话 
//    会话:一个终端用户与交互系统进行通讯的过程,CP的三次握手就创建了一个会话,TCP关闭连接就是关闭会话
//    http会话定义:多次HTTP连接间,维护用户与同一用户,发出的不同请求之间关联的情况,
//      称为维护一个会话（session）,通过会话管理对会话进行创建、信息存储、关闭等
//    实现机制:cookie=>session
//      用户端向服务端发送一个请求,服务端接收到请求后,初始化会话,生成相应的会话信息,核心是会话ID,
//        把会话ID发送给客户端,客户端接收到这个会话ID,把它存储起来,下一次发送请求的时候,
//        附带着这个会话ID一起发送给服务端,服务端只要根据这个会话ID,就知道你是哪个用户了
//    如何存储会话ID(SESSION ID)
//      服务器端:本地存储||数据库存储||第三方存储
//      客户端:不同的域有独立的会话,以域相关信息作为文件标识符创建会话文件(客户端存储)对会话信息进行存储
//        浏览器存储会话信息,是使用COOKIE文件的,里面保存着COOKIE信息,而服务端返回的会话ID也存储在里面,
//        一般情况下会话ID是附带在请求头中,但会话ID同样可以存储在内容体中或URL中
//    会话管理
//      会话创建:客户端发起不带会话ID(SESSION ID)的HTTP请求,服务端认为还没产生会话,就会创建会话,
//        生成会话ID并且在服务器中存储相关会话信息,并通知客户端已开启会话,一般是在响应头cookie中
//      会话识别:一个会话ID只会对应一个会话,SESSION只根据SESSION ID建立起会话,是不负责安全校验的,
//          只负责让服务端与客户端可以“通话”
//      会话信息操作:服务端与客户端的会话信息只有会话ID是必须相同的,其它会话信息(即会话ID映射的信息)没有直接关系
//      会话生命周期:会话从开始到结束就是会话的生命周期.设定一个时间,这个时间内无通讯就清除会话信息,
//        我们就把这个时间叫做会话超时周期(跟会话生命周期不是同一个概念)
//      会话关闭:一种是用户主动清除会话信息,另一种是会话超时,会话超时不是守护任务(或自动任务)
//        周期性检查处理的,而是访问会话信息时,根据会话信息中的“上一次更新时间”到现在的时间差,
//        与会话周期比较,超出周期的,清除会话信息,即会话关闭。
//    HTTP协议幂等性
//    会话校验:使用令牌(token)

/** TCP/IP (Transmission Control Protocol/Internet Protocol 传输控制协议/因特网互联协议) **/
// 三次握手:两次握手是最基本的
//   1.客户端发了个连接请求消息到服务端，服务端收到信息后知道自己与客户端是可以连接成功的，
//   2.但此时客户端并不知道服务端是否已经接收到了它的请求，所以服务端接收到消息后的应答，
//     客户端得到服务端的反馈后，才确定自己与服务端是可以连接上的
//   3.第三次握手是为了防止已经失效的连接请求报文段突然又传到服务端，因而产生错误。
// 握手完成后，开始TCP 数据传输
</script>
</html>